<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <!--<head metal:use-macro="macro/design.xhtml/head"/>-->
    <head metal:use-macro="macro/design.xhtml/head"/>
    <body>
        <div id="container">
            <div metal:use-macro="macro/design.xhtml/top" id='header'>
                <a href="http://iaeste.no"><img class="logo" src="xhtml/design/img/logo_iaeste.gif"/></a>
            </div>
            <div id="main">
                <div id="content">
                    <legend>2. Education</legend>
                    <div id="error">
                         <ul>
                            <li><strong>Invalid firstname:</strong> We want more than 3 letters!</li>
                            <li><strong>Invalid lastname:</strong> We want more than 3 letters!</li>
                            <li><strong>Invalid birthdate:</strong> We want a valid date!!</li>
                            <li><strong>Invalid sex:</strong> You have to choose male/female!</li>
                            <li><strong>Invalid marital status:</strong> You have to choose marital status!</li>
                        </ul>
                    </div>
                    <div id="error" class="valid">
                        <ul>
                            <li><strong>Congratulations!</strong> All personal fields are OK!</li>
                        </ul>
                    </div>
                    <form name="step2" id="customForm" action="" method="post">
                        
                        <div>
                            <label for="university">University</label>
                            <select name="university">
                                <option tal:repeat="uni university" tal:content="uni/name" tal:attributes="value uni/id">Don't know</option>
                            </select>
                            <span id="universityinfo">You have to choose a university!</span>
                        </div>
                        <div>
                            <label for="fieldofstudy">Field of study</label>
                            <select name="fieldofstudy">
                                <option tal:repeat="n studyfield" tal:content="n" tal:attributes="value n">Don't know</option>
                            </select>
                            <span id="fieldofstudyinfo">Choose your field of study!</span>
                        </div>
                        <div>
                            <label for="specialization">Specialization</label>
                            <input type="text" name="specialization" tal:attributes="value study/specialization"/>
                            <span id="specializationinfo"></span>
                        </div>
                        <div>
                            <label for="pointsreq">Points required</label>
                            <input type="text" name="pointsreq" tal:attributes="value study/pointsreq"/>
                            <span id="pointsreqinfo">Points required to complete your study!</span>
                        </div>
                        <div>
                            <label for="pointsattained">Points attained</label>
                            <input type="text" name="pointsattained" tal:attributes="value study/pointsattained"/>
                            <span id="pointsattainedinfo">Points attained so far (NOT what you should have in the summer!)</span>
                        </div>
                        <div>
                            <label for="yearreq">Years required</label>
                            <select name="yearsreq">
                                <option tal:repeat="yr yearreq" tal:content="yr" tal:attributes="value yr" />
                            </select>
                            <span id="yearreqinfo">Totally years for your study. Master is normally 5 and bachelor normally 3!</span>
                        </div>
                        <div>
                            <input id="send" type="submit" class="button" name="pre" value="<< Previous"/>
                            <input id="send" type="submit" class="button" name="next" value="Continue >>"/>
                        </div>
                    </form>
                </div>
            </div>
            <div metal:use-macro="macro/design.xhtml/bottom" id='footer'/>
        </div>
        <script type="text/javascript" src="./jscript/studyvalidation.js"></script>
    </body>
</html>